{include file="common/_header-css"}
  <body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form action="" method="post" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label for="title" class="layui-form-label">
                        <span class="x-red">*</span>角色名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="title" name="title" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                        拥有权限
                    </label>
                    <table  class="layui-table layui-input-block">
                        <tbody>
                        {volist name="rulesList" id="vo"}
                            <tr>

                                <td>
                                    {if $vo.grade == 1}
                                    <input type="checkbox" name="" lay-skin="primary" lay-filter="father" title="{$vo.title}" >
                                    {/if}
                                </td>

                                <td>
                                    <div class="layui-input-block">
                                        {volist name="$vo.tree" id="tree"}
                                        {if $tree.grade == 2}
                                        <input name="ids[{$tree.id}]" lay-skin="primary" type="checkbox" title="{$tree.title}" value="{$vo.id},{$tree.id}">
                                        {/if}
                                        {/volist}
                                    </div>
                                </td>
                            </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="describe" class="layui-form-label">
                        描述
                    </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="describe" name="describe" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="add">增加</button>
              </div>
            </form>
        </div>
    </div>

    {include file="common/_jQuery"}
    <script>
    </script>

    <script>
        layui.use(['form','layer'], function(){
              $ = layui.jquery;
              var form = layui.form,
              layer = layui.layer;

              form.on('submit(add)', function(data){
                $.post("{:url('permissions/role_add')}",data.field,function (res) {
                    if (res.code == 200) {
                        layer.alert(res.msg, {icon: 6}, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }else{
                        layer.alert(res.msg, {icon: 5});
                    }
                });
                return false;
              });
              form.on('checkbox(father)', function(data){
                    if(data.elem.checked){
                        $(data.elem).parent().siblings('td').find('input').prop("checked", true);
                        form.render();
                    }else{
                       $(data.elem).parent().siblings('td').find('input').prop("checked", false);
                        form.render();
                    }
                });
        });
    </script>
  </body>

</html>